<template>

    <div class="goodsinfo-container">

        <transition
        @before-enter="beforeEnter"
        @enter="enter"
        @after-enter="afterEnter">
          <div class="ball" v-show="ballFlag" ref="bool"></div>
        </transition>


        <!-- 商品轮播图区域 -->

        <!-- api -->
        <!-- <div class="mui-card">
            <div class="mui-card-content">
                <div class="mui-card-content-inner">
                 <swiper :lunbotuList="gettup" :isfull="false"></swiper>
                </div>
            </div>
			</div> -->



        <div class="mui-card">
            <div class="mui-card-content">
                <div class="mui-card-content-inner">
                 <mt-swipe :auto="4000">
                <mt-swipe-item><img src="../../images/01.jpg" alt=""></mt-swipe-item>
                <mt-swipe-item><img src="../../images/01.jpg" alt=""></mt-swipe-item>
                <mt-swipe-item><img src="../../images/01.jpg" alt=""></mt-swipe-item>
                </mt-swipe>
                </div>
            </div>
			</div>
            

        <!-- 商品购买区域 -->
        <!-- <div class="mui-card">
            <div class="mui-card-header">{{ getInfo.title }}</div>
            <div class="mui-card-content"> 
                <div class="mui-card-content-inner">
                   <p class="price">
                    市场:<del>{{ getInfo.market_price }}</del>&nbsp;&nbsp;销售价：<span class="now_price">￥{{ getInfo.sell_price }}</span>
                   </p>
                   <p>购买数量: <numbox  @getcount="getSelectadCount" :max="getGoodsInfo.stock_quantity"></numbox></p>
                   <p>
                       <mt-button type="primary" size="small">立即购买</mt-button>
                       <mt-button type="danger" size="small" @click="addToShopCar">加入购物车</mt-button>
                   </p>
                </div>
            </div>
			</div> -->

            <div class="mui-card">
            <div class="mui-card-header">商品参数</div>
            <div class="mui-card-content"> 
                <div class="mui-card-content-inner">
                   <p class="price">
                    市场:<del>￥2999</del>&nbsp;&nbsp;销售价：<span class="now_price">￥999</span>
                   </p>
                   <p>购买数量: <numbox></numbox></p>
                   <p>
                       <mt-button type="primary" size="small" >立即购买</mt-button>
                       <mt-button type="danger" size="small" @click="addshow">加入购物车</mt-button>
                        <!-- 如何实现加入购物车的时候 拿到 选择的数量 -->
                        <!-- 1. 按钮属于 goodsinfo 页面 -->
                        <!-- 2.由于涉及到了 父子组件的嵌套 所以 无法在goodsinfo 页面中获取到 选中的商品数量值 -->
                        <!-- 3.涉及到 子组件 向父组件船只 (事件调用的机制) -->
                        <!-- 4.事件调用的本质  父向子传递方法 子调用这个方法 同时 把数据当做参数 传递给这个方法 -->

                   </p>
                </div>
            </div>

			</div>

        <!-- 商品参数区域 -->
        <!-- <div class="mui-card">
            <div class="mui-card-header">商品参数</div>
            <div class="mui-card-content">
                <div class="mui-card-content-inner">
                    <p>商品货号:{{ getInfo.goos_no }}</p>
                    <p>库存情况:{{ getInfo.stock_quantity }}件</p>
                    <p>上架时间:{{ getInfo.add_time | dateFormat }}</p>
                </div>
            </div>
        <div class="mui-card-footer">页脚</div>
             <mt-button type="primary" size="large">图文介绍</mt-button>
             <mt-button type="danger" size="large">商品评价</mt-button>
			</div> -->


  <div class="mui-card">
            <div class="mui-card-header">商品参数</div>
            <div class="mui-card-content">
                <div class="mui-card-content-inner">
                    <p>商品货号:</p>
                    <p>库存情况:60件</p>
                    <p>上架时间:</p>
                </div>
            </div>
        <div class="mui-card-footer">页脚</div>
             <mt-button type="primary" size="large" @click="goDsec(id)">图文介绍</mt-button>
             <mt-button type="danger" size="large" @click="goComment(id)">商品评价</mt-button>
			</div>

           </div>



           
</template>

<script>

//导入轮播图插件
import swiper from '../subcomponents/swiper.vue'

//导入 添加商品数量选择框组件
import numbox from '../goods/goosinfo_numbox.vue'

export default {
    data(){
        return {
            //将路由参数中的Id 挂载到data上
            id:this.$route.params.id,
            gettup:[ //获取到 头部轮播图的全部信息

            ],
            getInfo:[], //获取 商品信息
            ballFlag:false,    //控制 小球隐藏和显示的
            selectedCont:1 //保存用户选中的商品数量 默认 认为用户买1个
        }
    },
    created(){
        this.getLunbo()
    },
    methods:{
        getLunbo(){ //轮播图 
            // this.$http.get('/api/getthumimages/'+id ).then(result => {
            //     if(result.body.status ===0 ){
            //         // 先循环轮播图数组的每一项 为item 添加 img属性 因为 轮播图 组件中
            //         //值认识  item.img  不认识 item.src
            //         this.gettup = result.body.message.forEach(ele =>{
            //                 //把 src 格式 都换成 img 格式
            //                 ele.img = ele.src;
            //         })
            //     }
            // })
        },
        getGoodsInfo(){ //商品参数
            // this.$http.get('api/goods/getinfo' + this.id).then(result => {
            //     if(result.body.status === 0){
            //         this.getInfo = result.body.message[0];
            //     }
            // })
        },
        //按照 Id 来跳转图文页面
        goDsec(id){
            //点击使用 编程式导航 跳转到 图为介绍页面
            this.$router.push({name:'goodsdesc',s:{id}})
        },
        goComment(id){
            this.$router.push({name:'goodscomment',params:{id}})
        },


        //这个是加入购物车模拟数据
        addshow(){ //让小球 显示 或隐藏
            this.ballFlag = !this.ballFlag;
        },
        //这是是加入购物车 api数据
        addToShopCar(){ //点击 按钮 把这里的数组 传递到addToCar中
            //让小球 显示 或隐藏
            this.ballFlag = !this.ballFlag;

            //创建一个这样的数组{id:商品id,count:要购买的数量,price:商品的单价,selected:false}
            var goodinfo = {  //拼接出一个 要保存到store中 car 数组里 的商品信息对象
                id:this.id,
                count:this.selectedCont,
                price:this.goodinfo.sell_price,
                selected:true
                }

            //把goodinfo 提交到 store 中的 addToCar 方法里面
            this.$store.commit('addToCar',goodinfo)

        },


        
        //这是半场动画
        beforeEnter(el){
            el.style.transform = "translate(0,0)"
        },
        enter(el){
            el.offsetWidth;

            //1.d导致动画不准确 原因 把小球的位置写死了 
            //2.只要分辨率 浏览器不一样时 就出现问题
            //3.根据不同情况 动态计算这个坐标值
            
            //获取小球 的页面中的位置  注册了ref
            // const ballFosition = this.$refs.bool.getBoundingClientRect();
            // //在购物车里面 添加一个ID
            // //根据Id 获取到 购物车在页面中的位置
            // const bageFosition = document
            // .getElementById("badge")
            // .getBoundingClientRect();

            
            // const xDist = bageFosition.left - ballFosition.left;

            // const yDist = bageFosition.top - ballFosition.top;

            // el.style.transform = "translate("+xDist+","+yDist+")"

             el.style.transform = "translate(93px,400px)"
             el.style.transition="all 0.5s cubic-bezier(.4,-0.3,1,.68)";
            done()
        },
        afterEnter(el){
            this.ballFlag = !this.ballFlag
        },
        //子组件来调
        getSelectadCount(count){ //购物车添加 商品 的数量
            //当子组件 把 选中的数量 传递给父组件的时候 把选中的值保存到 data 上
            this.selectedCont = count;
             console.log('父组件拿到的数量为'+ this.selectedCont);
        }

    },
    //把轮播子组件 挂载到这里
   components:{
       swiper,
       numbox
   }
}
</script>

<style lang="scss" scoped>
    // 这是 模拟数据中的 轮播图
      .mint-swipe{
        height: 200px;
        overflow: hidden;

    .mint-swipe-item
    &:nth-child(1){
        background-color: red;
    
    }
    .mint-swipe-item
    &:nth-child(2){
        background-color: orange;
    }
    .mint-swipe-item
    &:nth-child(3){
        background-color: blue;
    }
        
     img {
      width: 100%;
      height: 100%;
    }
    }

    
    

    .goodsinfo-container {
        background-color: #eee;
        overflow: hidden;

        .now_price {
            color: red;
            font-size: 16px;
            font-weight: bold;
        }
        
        .mui-card-footer {
            display: block;

            button {
                margin: 10px 0;
            }
        }
        .ball{
            width: 16px;
            height: 16px;
            border-radius: 50%;
            background-color:red; 
            position:absolute;
            top:390px;
            left:146px;
            z-index: 5;

        }
    }
</style>
